<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
// npm install leaflet iclient-leaflet --save
import L from 'leaflet';
import 'iclient-leaflet/iclient-leaflet.min.css';
import { iServer } from 'iclient-leaflet';
export default {
  mounted() {
    const map = L.map('map', {
      crs: L.CRS.EPSG3857,
      center: [39.9042, 116.4074],
      zoom: 10
    });

    const url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China';
    const tileLayer = L.supermap.tiledMapLayer(url).addTo(map);
    const search = L.supermap.control.search({
      layer: 'China_Province_pg',
      fieldName: 'name',
      filterFields: ['name'],
      autoCollapse: true,
      autoTrim: true,
      searchText: '北京市',
      customIcon: false,
      position: 'topright',
      showMarker: true,
      showPopup: true,
      markerStyle: {
        color: '#ff0000',
        fillColor: '#ff0000',
        radius: 8
      },
      popupFormat: '<div class="leaflet-popup-content">{name}</div>'
    }).addTo(map);
  }
};